<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Live2d Test Env</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">
      <canvas id="live2dcanvas" width="600" height="800" style="border:dashed 1px #CCC"></canvas>
    </div>
    <style>
      #live2dcanvas{
        width: 600;
        height: 800;
        position: fixed;
        opacity: 1;
        z-index: 999;
        pointer-events: none;
      }
    </style>
  <script type="text/javascript" src="device.min.js"></script>
  width: <input type="text" id="twidth" value="600"><br>
  height: <input type="text" id="theight" value="800"><br>
  modelName: <input type="text" id="tmodelName" value="shizuku"><br>
  headPos: <input type="text" id="theadPos" value="0.5"><br>
  scaling: <input type="text" id="tscaling" value="2"><br>
  opacityDefault: <input type="text" id="topacityDefault" value="0.7"><br>
  opacityHover: <input type="text" id="topacityHover" value="1"><br>
  <input type="button" value="GO!" onclick="javascript:myfunc()">

  <script language="JAVASCRIPT">
  function myfunc (){
    var width = document.getElementById("twidth").value;
    var height = document.getElementById("theight").value;
    var modelName = document.getElementById("tmodelName").value;
    var headPos = document.getElementById("theadPos").value;
    var scaling = document.getElementById("tscaling").value;
    var opacityDefault = document.getElementById("topacityDefault").value;
    var opacityHover = document.getElementById("topacityHover").value;
    var modelUrl="../assets/name/name.model.json";
    document.getElementById("live2dcanvas").style.width = width + 'px';
    document.getElementById("live2dcanvas").style.height = height + 'px';
    modelUrl = modelUrl.replace(/name/g, modelName);
    console.log(modelUrl);
    loadlive2d("live2dcanvas", modelUrl, headPos, scaling, opacityDefault, opacityHover);
  }
  </script>
  </body>
</html>
